<template>
  <div class="moonshot-demo">
    <div class="page-header">
      <h1>🌙 Moonshot AI 功能演示</h1>
      <p>体验月之暗面AI大模型的强大能力</p>
      <div class="api-info">
        <el-tag type="success">API地址: https://api.moonshot.cn</el-tag>
        <el-tag type="info">状态: 已连接</el-tag>
      </div>
    </div>

    <el-row :gutter="20">
      <!-- 左侧：聊天演示 -->
      <el-col :span="14">
        <el-card>
          <template #header>
            <span>💬 智能对话</span>
          </template>
          <MoonshotChat />
        </el-card>
      </el-col>

      <!-- 右侧：功能测试 -->
      <el-col :span="10">
        <el-card>
          <template #header>
            <span>🧪 功能测试</span>
          </template>
          
          <el-tabs v-model="activeTab" type="card">
            <!-- 代码生成 -->
            <el-tab-pane label="代码生成" name="code">
              <div class="function-test">
                <el-form>
                  <el-form-item label="编程语言">
                    <el-select v-model="codeConfig.language" style="width: 100%">
                      <el-option label="JavaScript" value="javascript" />
                      <el-option label="Python" value="python" />
                      <el-option label="Vue.js" value="vue" />
                      <el-option label="Java" value="java" />
                      <el-option label="C++" value="cpp" />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="需求描述">
                    <el-input
                      v-model="codeConfig.requirement"
                      type="textarea"
                      :rows="3"
                      placeholder="描述您需要的代码功能..."
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button 
                      type="primary" 
                      @click="generateCode"
                      :loading="codeLoading"
                      style="width: 100%"
                    >
                      生成代码
                    </el-button>
                  </el-form-item>
                </el-form>
                
                <div v-if="generatedCode" class="result-box">
                  <div class="result-header">
                    <h5>生成的代码：</h5>
                    <el-button size="small" @click="copyCode">复制</el-button>
                  </div>
                  <pre><code>{{ generatedCode }}</code></pre>
                </div>
              </div>
            </el-tab-pane>
            
            <!-- 文本翻译 -->
            <el-tab-pane label="智能翻译" name="translate">
              <div class="function-test">
                <el-form>
                  <el-form-item label="原文">
                    <el-input
                      v-model="translateConfig.text"
                      type="textarea"
                      :rows="3"
                      placeholder="输入需要翻译的文本..."
                    />
                  </el-form-item>
                  <el-form-item label="目标语言">
                    <el-select v-model="translateConfig.targetLang" style="width: 100%">
                      <el-option label="英文" value="英文" />
                      <el-option label="中文" value="中文" />
                      <el-option label="日文" value="日文" />
                      <el-option label="韩文" value="韩文" />
                      <el-option label="法文" value="法文" />
                      <el-option label="德文" value="德文" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button 
                      type="primary" 
                      @click="translateText"
                      :loading="translateLoading"
                      style="width: 100%"
                    >
                      翻译
                    </el-button>
                  </el-form-item>
                </el-form>
                
                <div v-if="translatedText" class="result-box">
                  <h5>翻译结果：</h5>
                  <div class="translation-result">{{ translatedText }}</div>
                </div>
              </div>
            </el-tab-pane>
            
            <!-- 文档分析 -->
            <el-tab-pane label="文档分析" name="analyze">
              <div class="function-test">
                <el-form>
                  <el-form-item label="文档内容">
                    <el-input
                      v-model="analyzeConfig.document"
                      type="textarea"
                      :rows="4"
                      placeholder="粘贴需要分析的文档内容..."
                    />
                  </el-form-item>
                  <el-form-item label="分析问题">
                    <el-input
                      v-model="analyzeConfig.question"
                      placeholder="您想了解文档的什么内容？"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button 
                      type="primary" 
                      @click="analyzeDocument"
                      :loading="analyzeLoading"
                      style="width: 100%"
                    >
                      分析文档
                    </el-button>
                  </el-form-item>
                </el-form>
                
                <div v-if="analysisResult" class="result-box">
                  <h5>分析结果：</h5>
                  <div class="analysis-result" v-html="formatText(analysisResult)"></div>
                </div>
              </div>
            </el-tab-pane>
            
            <!-- 创意写作 -->
            <el-tab-pane label="创意写作" name="creative">
              <div class="function-test">
                <el-form>
                  <el-form-item label="写作主题">
                    <el-input
                      v-model="creativeConfig.topic"
                      placeholder="输入写作主题..."
                    />
                  </el-form-item>
                  <el-form-item label="写作类型">
                    <el-select v-model="creativeConfig.type" style="width: 100%">
                      <el-option label="文章" value="文章" />
                      <el-option label="故事" value="故事" />
                      <el-option label="诗歌" value="诗歌" />
                      <el-option label="广告文案" value="广告文案" />
                      <el-option label="产品介绍" value="产品介绍" />
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button 
                      type="primary" 
                      @click="createContent"
                      :loading="creativeLoading"
                      style="width: 100%"
                    >
                      开始创作
                    </el-button>
                  </el-form-item>
                </el-form>
                
                <div v-if="creativeResult" class="result-box">
                  <h5>创作结果：</h5>
                  <div class="creative-result" v-html="formatText(creativeResult)"></div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>

        <!-- API信息卡片 -->
        <el-card style="margin-top: 20px;">
          <template #header>
            <span>📊 API信息</span>
          </template>
          
          <div class="api-stats">
            <div class="stat-item">
              <div class="stat-label">API地址</div>
              <div class="stat-value">https://api.moonshot.cn</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">当前模型</div>
              <div class="stat-value">moonshot-v1-8k</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">连接状态</div>
              <div class="stat-value">
                <el-tag type="success" size="small">正常</el-tag>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-label">请求次数</div>
              <div class="stat-value">{{ requestCount }}</div>
            </div>
          </div>

          <el-divider />

          <div class="model-info">
            <h5>🤖 可用模型</h5>
            <div class="model-list">
              <div class="model-item">
                <strong>moonshot-v1-8k</strong>
                <span>8K上下文长度，适合日常对话</span>
              </div>
              <div class="model-item">
                <strong>moonshot-v1-32k</strong>
                <span>32K上下文长度，适合长文档处理</span>
              </div>
              <div class="model-item">
                <strong>moonshot-v1-128k</strong>
                <span>128K上下文长度，适合超长文本分析</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import MoonshotChat from '@/components/MoonshotChat.vue'
import moonshotService from '@/utils/moonshotService'

export default {
  name: 'MoonshotDemo',
  components: {
    MoonshotChat
  },
  setup() {
    const activeTab = ref('code')
    const requestCount = ref(0)

    // 代码生成配置
    const codeConfig = reactive({
      language: 'javascript',
      requirement: ''
    })
    const generatedCode = ref('')
    const codeLoading = ref(false)

    // 翻译配置
    const translateConfig = reactive({
      text: '',
      targetLang: '英文'
    })
    const translatedText = ref('')
    const translateLoading = ref(false)

    // 文档分析配置
    const analyzeConfig = reactive({
      document: '',
      question: ''
    })
    const analysisResult = ref('')
    const analyzeLoading = ref(false)

    // 创意写作配置
    const creativeConfig = reactive({
      topic: '',
      type: '文章'
    })
    const creativeResult = ref('')
    const creativeLoading = ref(false)

    // 生成代码
    const generateCode = async () => {
      if (!codeConfig.requirement.trim()) {
        ElMessage.warning('请输入代码需求描述')
        return
      }

      codeLoading.value = true
      requestCount.value++

      try {
        const response = await moonshotService.generateCode(
          codeConfig.requirement, 
          codeConfig.language
        )

        if (response.status) {
          generatedCode.value = response.data.content
          ElMessage.success('代码生成成功')
        } else {
          ElMessage.error('代码生成失败')
        }
      } catch (error) {
        ElMessage.error('代码生成失败: ' + error.message)
        console.error(error)
      } finally {
        codeLoading.value = false
      }
    }

    // 复制代码
    const copyCode = async () => {
      try {
        await navigator.clipboard.writeText(generatedCode.value)
        ElMessage.success('代码已复制到剪贴板')
      } catch (error) {
        ElMessage.error('复制失败')
      }
    }

    // 翻译文本
    const translateText = async () => {
      if (!translateConfig.text.trim()) {
        ElMessage.warning('请输入需要翻译的文本')
        return
      }

      translateLoading.value = true
      requestCount.value++

      try {
        const response = await moonshotService.translate(
          translateConfig.text,
          translateConfig.targetLang
        )

        if (response.status) {
          translatedText.value = response.data.content
          ElMessage.success('翻译完成')
        } else {
          ElMessage.error('翻译失败')
        }
      } catch (error) {
        ElMessage.error('翻译失败: ' + error.message)
        console.error(error)
      } finally {
        translateLoading.value = false
      }
    }

    // 分析文档
    const analyzeDocument = async () => {
      if (!analyzeConfig.document.trim() || !analyzeConfig.question.trim()) {
        ElMessage.warning('请输入文档内容和分析问题')
        return
      }

      analyzeLoading.value = true
      requestCount.value++

      try {
        const response = await moonshotService.analyzeDocument(
          analyzeConfig.document,
          analyzeConfig.question,
          'moonshot-v1-32k' // 使用32K模型处理长文档
        )

        if (response.status) {
          analysisResult.value = response.data.content
          ElMessage.success('文档分析完成')
        } else {
          ElMessage.error('文档分析失败')
        }
      } catch (error) {
        ElMessage.error('文档分析失败: ' + error.message)
        console.error(error)
      } finally {
        analyzeLoading.value = false
      }
    }

    // 创意写作
    const createContent = async () => {
      if (!creativeConfig.topic.trim()) {
        ElMessage.warning('请输入写作主题')
        return
      }

      creativeLoading.value = true
      requestCount.value++

      try {
        const response = await moonshotService.creativeWriting(
          creativeConfig.topic,
          creativeConfig.type
        )

        if (response.status) {
          creativeResult.value = response.data.content
          ElMessage.success('创作完成')
        } else {
          ElMessage.error('创作失败')
        }
      } catch (error) {
        ElMessage.error('创作失败: ' + error.message)
        console.error(error)
      } finally {
        creativeLoading.value = false
      }
    }

    // 格式化文本
    const formatText = (text) => {
      return text
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
        .replace(/\*(.*?)\*/g, '<em>$1</em>')
        .replace(/\n/g, '<br>')
    }

    return {
      activeTab,
      requestCount,
      codeConfig,
      generatedCode,
      codeLoading,
      translateConfig,
      translatedText,
      translateLoading,
      analyzeConfig,
      analysisResult,
      analyzeLoading,
      creativeConfig,
      creativeResult,
      creativeLoading,
      generateCode,
      copyCode,
      translateText,
      analyzeDocument,
      createContent,
      formatText
    }
  }
}
</script>

<style scoped>
.moonshot-demo {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #303133;
  margin-bottom: 8px;
  font-size: 28px;
}

.page-header p {
  color: #606266;
  font-size: 16px;
  margin-bottom: 16px;
}

.api-info {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.function-test {
  padding: 16px 0;
}

.result-box {
  margin-top: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.result-box h5 {
  margin: 0 0 12px 0;
  color: #495057;
  font-size: 14px;
  font-weight: 600;
}

.result-box pre {
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  margin: 0;
  font-size: 13px;
}

.translation-result,
.analysis-result,
.creative-result {
  line-height: 1.6;
  color: #495057;
}

.api-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.model-info h5 {
  margin: 0 0 12px 0;
  color: #303133;
  font-size: 14px;
}

.model-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.model-item {
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #409eff;
}

.model-item strong {
  display: block;
  color: #303133;
  font-size: 13px;
  margin-bottom: 2px;
}

.model-item span {
  font-size: 12px;
  color: #606266;
}
</style>
